<template>
  <div>
    <div class="Mailbox activation">
      <h3 class="title" style="color: black; font-weight: bold; text-align:center"> 激活邮箱 </h3>
    </div>

    <div style="width: 70%; margin:auto" class="container">

      <el-form ref="mailForm" :model="mailForm" label-width="100px" size="medium" class="demo-ruleForm">
        <el-form-item label="邮箱" class="em">
          <el-input placeholder="请输入您的邮箱" type="email" v-model="mailForm.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" class="cd">
          <el-input placeholder="请输入验证码" v-model="mailForm.code" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item style="text-align:center" class="code">
          <el-button type="primary" @click="getCode" style="width:140px; height:35px; cursor: pointer">
            <span v-show="show"> 获取验证码 </span>
            <span v-show="!show" style="font-size:5px" class="count">({{ count }}s)</span>
          </el-button>
        </el-form-item>


        <el-form-item style="text-align:center;" class="email ">
          <el-button type="success" @click="activate" style="height:35px"> 激活邮箱</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>

import { getToken } from '@/utils/auth'

const TIME_COUNT = 60 // 设置一个全局的倒计时时间
let Geted_Code = ''

export default {
  name: 'Mailbox_activation',
  data() {
    return {
      show: true,
      count: '',
      mailForm: {
        email: '',
        code: '',
        token: ''
      }
    }
  },
  methods: {
    getCode() { // 点击获取验证码
      const regexMail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

      if (!this.rest) {
        if (this.mailForm.email === '') {
          this.myMessage('error', '您输入的邮箱为空!')
        } else if (!regexMail.test(this.mailForm.email)) {
          this.myMessage('error', '请输入正确的邮箱!')
        } else {
          this.count = TIME_COUNT
          this.show = false

          this.axios.get('http://172.29.40.205:8080/admin/send_email', {
            params: {
              email: this.mailForm.email
            }
          }).then(res => {
            Geted_Code = res.data.data.code

            if (res.data.success) {
              this.myMessage('success', '验证码获取成功!')
            } else {
              this.myMessage('error', '验证码获取失败,请重试!')
            }
          }).catch(err => {
            console.log(err)
          })
        }
      }
      this.rest = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
        } else {
          this.show = true
          clearInterval(this.rest) // 清除定时器
          this.rest = null
        }
      }, 1000)
    },

    activate() {

      this.mailForm.token = getToken()
      // console.log(this.mailForm.token)

      if (this.mailForm.code === Geted_Code) {
        console.log('\'' + this.mailForm.email + '\'')
        // console.log(this.mailForm.email)
        // console.log(this.mailForm.token)
        let params = new URLSearchParams()
        params.append('email',this.mailForm.email)
        params.append('token',this.mailForm.token)
        this.axios.post('http://172.29.40.205:8080/admin/activate', params
          // {
          //   params: {
          //     email: this.mailForm.email,
          //     token: this.mailForm.token
          //   }
          // }
        ).then(res => {
          if (res.data.success) {
            this.myMessage('success', '验证码匹配,激活成功!')
            this.$router.push({ path: '/Center/profile' })
          } else {
            this.myMessage('error', '意外错误,请重试!')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.myMessage('error', '验证码不匹配,激活失败!')
      }
    },

    myMessage(type, message) { // 弹窗提示
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
.code {
  position: relative;
  left: -200px;
}

.email {
  position: relative;
  top: -59px;
  left: 60px;
}

.container {
  position: relative;
}
</style>
